<template>
  <a-card class="container">
    <div class="top_btn">
      <a-button icon="pic-right" type="primary" class="secondary_btn">模板</a-button>
      <a-button icon="unordered-list" type="primary" class="secondary_btn" style="margin-left: 10px">执行</a-button>
    </div>
    <div class="panel">
      <div class="panel_left">
        <div class="panel_title">模型列表</div>
        <div class="tree_menu">
          <a-tree
            class="tree_menu_cont"
            default-expand-all
            :tree-data="treeData"
            :default-selected-keys="['0-0']"
            @select="handleMenuTreeSelect"
          />
        </div>
      </div>
      <div class="panel_right">
        <a-tabs :tab-list="tabList" />
      </div>
    </div>
    <div class="panel_btn">
      <a-button type="primary">保存</a-button>
      <a-button style="margin-left: 10px">取消</a-button>
    </div>
  </a-card>
</template>

<script>
import ATabs from '../components/ATabs.vue'
export default {
  name: 'dezfmxyj',
  components: { ATabs },
  data() {
    return {
      treeData: [
        {
          title: '大额支付监测',
          key: '0',
          children: [
            { title: '大额对私付款（内部员工）', key: '0-0' },
            { title: '大额对私付款（外部员工）', key: '0-1' },
          ],
        },
      ],
      tabList: [
        {
          key: 1,
          title: '模型设置',
          importSrc: () => import('./components/mxsz.vue'),
        },
        {
          key: 2,
          title: '模型设置',
          importSrc: () => import('./components/zxjg.vue'),
        },
      ],
    }
  },
  methods: {
    handleMenuTreeSelect(selectedKeys, e) {
      e.node.onExpand()
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import './index.less';
</style>